/**
 *  脱机录入 - 出矿弹窗
 * @author xiaoxujs
 */

import { DatePicker, Form, Input, message, Modal, Radio, Select, Space } from "antd";
import { FC } from "react";
import { IBaseEntryVoucherExitForm } from "../../../../../type/Jinchu";
import { ISelectList } from "../../../../../type/antd";
import { postBaseEntryVoucherExit } from "../../../api";
import { Hongdian } from "../../style";
import dayjs from "dayjs";

const Tuojiluru: FC<{
    open: boolean,
    carColorList: ISelectList[],
    handleCallback: () => void,
}> = ({
    open,
    carColorList,
    handleCallback
}) => {
        const [form] = Form.useForm<IBaseEntryVoucherExitForm>();
        const { validateFields, resetFields } = form;

        const handleOk = () => {
            validateFields().then(values => {
                let params = {
                    ...values,
                    actualExitTime: dayjs(values.actualExitTime).format('YYYY-MM-DD HH:mm:ss')
                }
                postBaseEntryVoucherExit(params).then((res: any) => {
                    if (res.code === 20000) {
                        message.success('脱机录入完成');
                        resetFields();
                        handleCallback()
                    } else {
                        message.error(res.msg)
                    }
                })
            })
        };

        const handleCancel = () => {
            resetFields();
            handleCallback()
        };
        return <Modal title="脱机录入" open={open} onOk={handleOk} onCancel={handleCancel}>
            <Form
                name="complex-form"
                form={form}
                labelCol={{ span: 6 }}
                wrapperCol={{ span: 16 }}
                initialValues={{
                    isExit: 1,
                    plateColor: '黄'
                }}
            >
                <Form.Item label={
                    <span>
                        <Hongdian>*</Hongdian>
                        <span>车牌号</span>
                    </span>
                }>
                    <Space.Compact>
                        <Form.Item<IBaseEntryVoucherExitForm >
                            name='plateColor'
                            noStyle
                            rules={[{ required: true, message: '请选择车牌颜色!' },]}
                        >
                            <Select style={{ width: '10rem' }} options={carColorList} />
                        </Form.Item>
                        <Form.Item<IBaseEntryVoucherExitForm >
                            name='licensePlate'
                            noStyle
                            rules={[{ required: true, message: '请输入车牌号!' },]}
                        >
                            <Input placeholder="请输入车牌号!" />
                        </Form.Item>
                    </Space.Compact>
                </Form.Item>
                <Form.Item<IBaseEntryVoucherExitForm >
                    name="driverPhone"
                    label='司机电话'
                    rules={[
                        { required: true, message: '请输入司机电话!' },
                        { pattern: /^1[3-9]\d{9}$/, message: "请输入正确的手机号!" },
                    ]}
                >
                    <Input placeholder="请输入司机电话" style={{ width: '27.3rem' }} />
                </Form.Item>
                <Form.Item<IBaseEntryVoucherExitForm >
                    name="actualExitTime"
                    label='实际出矿时间'
                    rules={[
                        { required: true, message: '请选择实际出矿时间!' }
                    ]}
                >
                    <DatePicker showTime style={{ width: '27.3rem' }} />
                </Form.Item>
                <Form.Item<IBaseEntryVoucherExitForm >
                    name="isExit"
                    label='是/否出矿？'
                    rules={[
                        { required: true, message: '请选择是否入矿!' }
                    ]}
                >
                    <Radio.Group >
                        <Radio value={1}> 是</Radio>
                    </Radio.Group>
                </Form.Item>
            </Form>
        </Modal>
    }

export default Tuojiluru;